<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <link rel="stylesheet" type="text/css" href="../css/common.css" />
  <link rel="stylesheet" type="text/css" href="../less/shequ.css" />
  <body>
    <div class="wrap">
      <div class="headBox">
        <div class="left">
          <h2>圈子世界</h2>
        </div>
        <div class="right">
          <img src="../img/nav%20bar_icon_comment.png" class="comment_img" />
          <img src=".././img/nav%20bar_icon_search.png" class="search_img" />
        </div>
      </div>
      <div class="navBox">
        <img src="../img/community_photo_banner.png" />
        <ul class="navUl">
          <li class="quanzi">
            <img src="../img/community_icon_same%20hobby.png" />
            <p>圈子同好</p>
          </li>
          <li class="huati">
            <img src="../img/community_icon_topic%20camp.png" />
            <p>话题营地</p>
          </li>
          <li class="paihang">
            <img src="../img/community_icon_ranking%20List.png" />
            <p>排行榜单</p>
          </li>
          <li class="sales">
            <img src="../img/community_icon_contract%20drawing.png" />

            <p>签约售图</p>
          </li>
        </ul>
      </div>
      <div class="sayBox">
        <div class="head">
          <div class="left">
            <span class="line"></span>
            <span class="title_text">大家都在说</span>
          </div>
          <div class="right">
            <span class="more_text">查看更多</span>
            <img src="../img/home_icon_more.png" class="more_img" />
          </div>
        </div>
        <ul class="sayUl"></ul>
        <div class="dongtaiBox">
          <div class="head_dt">
            <span class="dtTitle active">热门动态</span>
            <span class="dtTitle">最新动态</span>
          </div>
          <div class="content_dt">
            <ul class="wallUl1"></ul>
            <ul class="wallUl2"></ul>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script
    src="../js/jquery-3.5.1.min.js"
    type="text/javascript"
    charset="utf-8"
  ></script>
  <script src="../js/rem.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    var sayList = [
      {
        img: "../img/everybody%20said_img.png",
        sayText: "分享那些学摄影的书籍",
        sayTitle: "#话题：摄影书籍",
        tipList: [
          {
            img: "../img/everybody%20said_photo_head%20portrait.png",
            tipText: "影像杂谈",
          },
          {
            img: "../img/everybody%20said_photo_head%20portrait.png",
            tipText: "影像杂谈",
          },
          {
            img: "../img/everybody%20said_photo_head%20portrait.png",
            tipText: "影像杂谈",
          },
        ],
      },
      {
        img: "../img/everybody%20said_img.png",
        sayText: "分享那些学摄影的书籍",
        sayTitle: "#话题：摄影书籍",
        tipList: [
          {
            img: "../img/everybody%20said_photo_head%20portrait.png",
            tipText: "影像杂谈",
          },
          {
            img: "../img/everybody%20said_photo_head%20portrait.png",
            tipText: "影像杂谈",
          },
          {
            img: "../img/everybody%20said_photo_head%20portrait.png",
            tipText: "影像杂谈",
          },
        ],
      },
      {
        img: "../img/everybody%20said_img.png",
        sayText: "分享那些学摄影的书籍",
        sayTitle: "#话题：摄影书籍",
        tipList: [
          {
            img: "../img/everybody%20said_photo_head%20portrait.png",
            tipText: "影像杂谈",
          },
          {
            img: "../img/everybody%20said_photo_head%20portrait.png",
            tipText: "影像杂谈",
          },
          {
            img: "../img/everybody%20said_photo_head%20portrait.png",
            tipText: "影像杂谈",
          },
        ],
      },
      {
        img: "../img/everybody%20said_img.png",
        sayText: "分享那些学摄影的书籍",
        sayTitle: "#话题：摄影书籍",
        tipList: [
          {
            img: "../img/everybody%20said_photo_head%20portrait.png",
            tipText: "影像杂谈",
          },
          {
            img: "../img/everybody%20said_photo_head%20portrait.png",
            tipText: "影像杂谈",
          },
          {
            img: "../img/everybody%20said_photo_head%20portrait.png",
            tipText: "影像杂谈21313",
          },
        ],
      },
    ];

    var dtList1 = [
      {
        picture: "../img/popular%20trends_img1.png",
        countText: "6",
        text: "近似色配色让人感觉画面和谐，再添加点缀的互补色就更加完美",
        head_img: "../img/everybody%20said_photo_head%20portrait.png",
        name: "小熊先生",
        zan_count: "928",
        zan: true,
      },
      {
        picture: '../img/photography%20inspiration%20and%20story_img.png"',
        countText: "10",
        text: "近似色配色让人感觉画面和谐，再添加点缀的互补色就更加完美",
        head_img: "../img/everybody%20said_photo_head%20portrait.png",
        name: "小🐱女士",
        zan_count: "589",
        zan: false,
      },
      {
        picture: "../img/popular%20trends_img1.png",
        countText: "6",
        text: "近似色配色让人感觉画面和谐，再添加点缀的互补色就更加完美",
        head_img: "../img/everybody%20said_photo_head%20portrait.png",
        name: "小熊先生",
        zan_count: "928",
        zan: true,
      },
      {
        picture: '../img/photography%20inspiration%20and%20story_img.png"',
        countText: "10",
        text: "近似色配色让人感觉画面和谐，再添加点缀的互补色就更加完美",
        head_img: "../img/everybody%20said_photo_head%20portrait.png",
        name: "小🐱女士",
        zan_count: "589",
        zan: true,
      },
    ];
    var dtList2 = [
      {
        picture: '../img/photography%20inspiration%20and%20story_img.png"',
        countText: "6",
        text: "近似色配色让人感觉画面和谐，再添加点缀的互补色就更加完美",
        head_img: "../img/everybody%20said_photo_head%20portrait.png",
        name: "小熊先生",
        zan_count: "928",
        zan: true,
      },
      {
        picture: "../img/popular%20trends_img1.png",
        countText: "10",
        text: "近似色配色让人感觉画面和谐，再添加点缀的互补色就更加完美",
        head_img: "../img/everybody%20said_photo_head%20portrait.png",
        name: "小🐱女士",
        zan_count: "589",
        zan: false,
      },
      {
        picture: "../img/popular%20trends_img1.png",
        countText: "6",
        text: "近似色配色让人感觉画面和谐，再添加点缀的互补色就更加完美",
        head_img: "../img/everybody%20said_photo_head%20portrait.png",
        name: "小熊先生",
        zan_count: "928",
        zan: true,
      },
      {
        picture: '../img/photography%20inspiration%20and%20story_img.png"',
        countText: "10",
        text: "近似色配色让人感觉画面和谐，再添加点缀的互补色就更加完美",
        head_img: "../img/everybody%20said_photo_head%20portrait.png",
        name: "小🐱女士",
        zan_count: "589",
        zan: false,
      },
    ];

    for (var i = 0; i < sayList.length; i++) {
      $(".sayUl").append(
        '<li class="sayLi"><ul class="tipBox"></ul><img src="' +
          sayList[i].img +
          '" ><p class="sayText">' +
          sayList[i].sayText +
          '</p><p class="sayTitle">' +
          sayList[i].sayTitle +
          "</p></li>"
      );
    }

    $(".tipBox").each(function (index) {
      for (var i = 0; i < sayList.length; i++) {
        if (i == index) {
          contentList = sayList[i].tipList;
        }
      }
      for (var i = 0; i < contentList.length; i++) {
        $(".tipBox")
          .eq(index)
          .append(
            '<li class="tip"><img src="' +
              contentList[i].img +
              '"><p>' +
              contentList[i].tipText +
              "</p></li>"
          );
      }
    });

    $(".dtTitle").each(function (index) {
      $(this).on("click", function () {
        $(".dtTitle").removeClass("active");
        $(".dtTitle").eq(index).addClass("active");
      });
    });

    function fn() {
      for (var i = 0; i < dtList1.length; i++) {
        if (dtList1[i].zan == true) {
          $(".wallUl1").append(
            '<li><img src="' +
              dtList1[i].picture +
              '" class="picture"><div class="countBox"><img src="../img/home_icon_number%20of%20images.png" class="icon_img"><span>' +
              dtList1[i].countText +
              '</span></div><p class="text">' +
              dtList1[i].text +
              '</p><div class="foot"><div class="left"><img src="' +
              dtList1[i].head_img +
              '" class="head_img"><span class="name">' +
              dtList1[i].name +
              '</span></div><div class="right"><img src="../img/popular%20trends_icon_like_pre.png" class="zan_img"><span class="zan_count">' +
              dtList1[i].zan_count +
              "</span></div></div></li>"
          );
        } else {
          $(".wallUl1").append(
            '<li><img src="' +
              dtList1[i].picture +
              '" class="picture"><div class="countBox"><img src="../img/home_icon_number%20of%20images.png" class="icon_img"><span>' +
              dtList1[i].countText +
              '</span></div><p class="text">' +
              dtList1[i].text +
              '</p><div class="foot"><div class="left"><img src="' +
              dtList1[i].head_img +
              '" class="head_img"><span class="name">' +
              dtList1[i].name +
              '</span></div><div class="right"><img src="../img/popular%20trends_icon_like_nor.png" class="zan_img"><span class="zan_count">' +
              dtList1[i].zan_count +
              "</span></div></div></li>"
          );
        }
      }
      $(".wallUl1 .zan_img").each(function (index) {
        $(this).on("click", function () {
          $(".wallUl1").find("li").remove();
          if (dtList1[index].zan) {
            dtList1[index].zan = false;
            dtList1[index].zan_count--;
          } else {
            dtList1[index].zan = true;
            dtList1[index].zan_count++;
          }
          fn();
        });
      });
    }
    fn();
    function fn2() {
      for (var i = 0; i < dtList2.length; i++) {
        if (dtList2[i].zan) {
          $(".wallUl2").append(
            '<li><img src="' +
              dtList2[i].picture +
              '" class="picture"><div class="countBox"><img src="../img/home_icon_number%20of%20images.png" class="icon_img"><span>' +
              dtList2[i].countText +
              '</span></div><p class="text">' +
              dtList2[i].text +
              '</p><div class="foot"><div class="left"><img src="' +
              dtList2[i].head_img +
              '" class="head_img"><span class="name">' +
              dtList2[i].name +
              '</span></div><div class="right"><img src="../img/popular%20trends_icon_like_pre.png" class="zan_img"><span class="zan_count">' +
              dtList2[i].zan_count +
              "</span></div></div></li>"
          );
        } else {
          $(".wallUl2").append(
            '<li><img src="' +
              dtList2[i].picture +
              '" class="picture"><div class="countBox"><img src="../img/home_icon_number%20of%20images.png" class="icon_img"><span>' +
              dtList2[i].countText +
              '</span></div><p class="text">' +
              dtList2[i].text +
              '</p><div class="foot"><div class="left"><img src="' +
              dtList2[i].head_img +
              '" class="head_img"><span class="name">' +
              dtList2[i].name +
              '</span></div><div class="right"><img src="../img/popular%20trends_icon_like_nor.png" class="zan_img"><span class="zan_count">' +
              dtList2[i].zan_count +
              "</span></div></div></li>"
          );
        }
      }
      $(".wallUl2 .zan_img").each(function (index) {
        $(this).on("click", function () {
          $(".wallUl2").find("li").remove();
          if (dtList2[index].zan) {
            dtList2[index].zan = false;
            dtList2[index].zan_count--;
          } else {
            dtList2[index].zan = true;
            dtList2[index].zan_count++;
          }
          fn2();
        });
      });
    }
    fn2()
    $(".search_img").click(function () {
      localStorage.setItem("path", "shequ");
      window.location.href = "../search.html";
    });
  </script>
</html>
